var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var { CleanWebpackPlugin } = require("clean-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");// 提取css代码（单独）
module.exports = {
    entry: {
        index: "./src/index.js",
        about: "./src/about.js",
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/bundle-[name]-[hash:8].js"
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    // 针对css文件中背景图
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"
                        }
                    },
                    "css-loader"
                ]
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"
                        }
                    },
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            esModule: false, // 关闭ES中的严格模式
                            limit: 8192,// 限制大小
                            name: './photo/[name]-[hash:8].[ext]',// 设置文件目录和名称
                        }
                    },
                ],
                // webpack 5.+ 需要防止重复打包图片
                type: 'javascript/auto'
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', { targets: "defaults" }]
                        ]
                    }
                }
            },
            // 让html文档直接支持img标签使用图片
            // {
            //     test: /\.(htm|html)$/i,
            //     loader: 'html-withimg-loader',
            // },
            // 添加解析src和data-src属性即可
            {
                // 处理html中img资源
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    sources: {
                        list: [
                            {
                                tag: 'img',
                                attribute: 'src',
                                type: 'src',
                            },
                            {
                                tag: 'img',
                                attribute: 'data-src',
                                type: 'src',
                            },
                        ],
                    },
                },
            },
            {
				test:/\.(eot|otf|svg|ttf|woff2?)$/,   //这里匹配字体文件
				use:[
					{
						loader:"url-loader",     //使用url-loader
						options:{
							limit:5000,          //如果字体文件在于5K就重新生成目录（这里最后设小一点，让其不要打包在入口文件中，不然的话文件会过大）
							outputPath:"assets/font",
							name:"[name].[ext]",
							publicPath:"./assets/font"
						}
					
					}
				]
				
			}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "Index",
            template: "./src/views/index.html",
            filename: "index.html",
            chunks:["index"]
        }),
        new HtmlWebpackPlugin({
            title: "about",
            template: "./src/views/about.html",
            filename: "./pages/about.html",
            chunks:["about"]
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename:"./css/[name].css"
        })
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: 'commons',    //提取出来的文件命名
                    chunks: 'initial',  //initial表示提取入口文件的公共部分
                    minChunks: 2,       //表示提取公共部分最少的文件数
                    minSize: 0          //表示提取公共部分最小的大小
              }
          }
      }
    }
}